<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<a href="" @click.prevent="flag = true">登录</a>
			<a href="" @click.prevent="flag = false">注册</a>
			<!-- 1、实现两个组件切换 通过v-if v-else -->
			<!-- 缺陷只适合两个组件 -->
			<login v-if="flag"></login>
			<register v-else="flag"></register>
		</div>
		<script type="text/javascript">
			Vue.component('login',{
				template:'<h3>登录组件</h3>'
			})
			
			Vue.component('register',{
				template:'<h3>注册组件</h3>'
			})
			
			
			var vm =new Vue({
				el:'#app',
				data:{
					flag:true
				},
				methods:{}
			})
		</script>
	</body>
</html>
